<template>
  <el-dialog title="工单详情" :visible="isShow" @close="closeFn" width="630px">
    <div class="title">
      <div class="left">
        <div class="clock">
          <img
            v-if="infoForm.taskStatusTypeEntity.statusId === 1"
            src="../../../assets/task/clock.png"
            alt=""
          />
          <img v-if="infoForm.taskStatusTypeEntity.statusId === 3" src="../../../assets/task/warning.png" alt="" />
          <img v-if="infoForm.taskStatusTypeEntity.statusId === 4" src="../../../assets/task/yes.png" alt="" />
        </div>
        <span v-if="infoForm.taskStatusTypeEntity.statusId === 1">待办</span>
        <span v-if="infoForm.taskStatusTypeEntity.statusId === 3">取消</span>
        <span v-if="infoForm.taskStatusTypeEntity.statusId === 4">完成</span>
      </div>
      <div class="right">
        <img
          v-if="infoForm.taskStatusTypeEntity.statusId === 1"
          src="../../../assets/task/paper.png"
          alt=""
        />
        <img v-if="infoForm.taskStatusTypeEntity.statusId === 3" src="../../../assets/task/canceled.png" alt="" />
        <img v-if="infoForm.taskStatusTypeEntity.statusId === 4" src="../../../assets/task/done.png" alt="" />
      </div>
    </div>
    <el-form :inline="true" :model="infoForm" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号：">
            <span>{{ infoForm.innerCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建日期：">
            <span>{{ infoForm.createTime.split("T").join(" ") }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="infoForm.taskStatusTypeEntity.statusId === 3" :span="12">
          <el-form-item label="取消日期：">
            <span>{{ infoForm.updateTime.split("T").join(" ") }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运营人员：">
            <span>{{ infoForm.userName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单类型：">
            <span>{{ infoForm.taskType ? infoForm.taskType.typeName : '' }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="infoForm.taskType" :span="12">
          <el-form-item label="补货数量：">
            <span class="supplyInfo" @click="getSupplyInfo">补货详情</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单方式：">
            <span>{{ !infoForm.taskType ?  '' : infoForm.taskType.type === 1  ? "自动" : "手动" }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="infoForm.taskStatusTypeEntity.statusId !== 3" :span="12">
          <el-form-item label="备注：">
            <span>{{ infoForm.desc }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="infoForm.taskStatusTypeEntity.statusId === 3" :span="12">
          <el-form-item label="取消原因：">
            <span>{{ infoForm.desc }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <el-col v-if="infoForm.taskStatusTypeEntity.statusId !== 3" :span="5">
        <el-button
          class="btn cancel"
          @click="warning"
          style="margin-right: 20px"
          >取消工单</el-button
        >
      </el-col>
      <el-col v-else :span="5">
        <el-button
          class="btn cancel"
          @click="openAdd"
          style="margin-right: 20px"
          >重新创建</el-button
        >
      </el-col>
    </el-row>
    <!-- 补货弹窗 -->
    <el-dialog
      width="630px"
      title="补货详情"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-table :data="supply" max-height="360" style="width: 100%">
        <el-table-column prop="channelCode" label="货道编号"> </el-table-column>
        <el-table-column prop="skuName" label="商品"> </el-table-column>
        <el-table-column prop="expectCapacity" label="补货数量" width="180">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 退出确认弹窗 -->
    <el-dialog
      :visible.sync="warningVisible"
      :show-close="false"
      append-to-body
      width="30%"
      class="warning"
    >
      <span class="warning-txt"
        ><i
          class="el-icon-warning"
        />取消工单后，将不能恢复，是否确认取消？</span
      >
      <el-row type="flex" justify="center" style="margin-top: 40px">
        <el-col :span="5">
          <el-button size="small" @click="warningVisible = false"
            >取 消</el-button
          >
        </el-col>
        <el-col :span="4">
          <el-button
            size="small"
            class="confirm"
            type="primary"
            @click="cancelTask"
            >确 定</el-button
          ></el-col
        >
      </el-row>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  getAllTaskStatusApi,
  getTaskTypeApi,
  getTaskInfoApi,
  getSupplyInfoApi,
  cancelTaskApi,
} from "@/api/task";
import { EventBus } from "./event-bus.js";
export default {
  props: {
    isShow: Boolean,
    taskId: String,
  },
  data() {
    return {
      infoForm: {},
      status: [],
      type: [],
      supply: [],
      innerVisible: false,
      warningVisible: false,
    };
  },
  created() {
    this.getAllTaskStatus();
    this.getTaskType();
    this.getTaskInfo();
  },
  methods: {
    async getAllTaskStatus() {
      const res = await getAllTaskStatusApi();
      this.status = res;
    },
    async getTaskType() {
      const res = await getTaskTypeApi();
      this.type = res;
    },
    async getTaskInfo() {
      const res = await getTaskInfoApi(this.taskId);
      this.infoForm = {...res};
      console.log(this.infoForm);
    },
    async getSupplyInfo() {
      this.innerVisible = true;
      const res = await getSupplyInfoApi(this.taskId);
      console.log(res);
      this.supply = res;
    },
    handleClose() {},
    closeFn() {
      this.$emit("update:isShow", false);
    },
    warning() {
      this.warningVisible = true;
    },
    async cancelTask() {
      await cancelTaskApi({ taskId: this.taskId, desc: "看我干不干你就完了" });
      this.$message.success("已取消该工单");
      this.warningVisible = false;
      this.$emit("update:isShow", false);
      this.$emit("searchTask");
    },
    openAdd() {
      this.$emit("openAdd", true);
      EventBus.$emit("aMsg", "来自A页面的消息");
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 80px;
  height: 36px;
  border: none;
  padding: 0;
  line-height: 36px;
}
.cancel {
  background-color: #fbf4f0;
  color: #7e7570;
}

.title {
  width: 590px;
  height: 54px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 25px;
  .left {
    display: flex;
    align-items: center;
    span {
      color: #252525;
      margin-left: 16px;
    }
  }
  .right {
    padding-right: 55px;
    padding-bottom: 10px;
  }
}
.supplyInfo {
  color: #6488ff;
  cursor: pointer;
}
.warning {
  margin-top: 150px;
  text-align: center;
  ::v-deep .el-dialog__body {
    padding-top: 10px;
  }
  .warning-txt {
    color: #000000;
    font-size: 16px;
  }
  .el-icon-warning {
    color: #ff665f;
    font-size: 20px;
    margin-right: 10px;
  }
  .confirm {
    background-color: #7f9dff;
    border: 1px solid #7f9dff;
  }
}
</style>
